<template>
  <div class="maintenance-page">
    <div class="page-header">
      <h2>
        <el-icon><Setting /></el-icon>
        维保计划管理
      </h2>
      <el-button type="primary" @click="handleCreatePlan">
        <el-icon><Plus /></el-icon>
        新建计划
      </el-button>
    </div>

    <!-- 维保计划列表 -->
    <el-card>
      <el-table :data="maintenancePlans" stripe>
        <el-table-column prop="code" label="计划编号" width="150" />
        <el-table-column prop="equipmentName" label="设备名称" min-width="150" />
        <el-table-column prop="type" label="维保类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === '定期保养' ? 'success' : 'primary'">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cycle" label="维保周期" width="100" />
        <el-table-column prop="nextDate" label="下次维保" width="120" />
        <el-table-column prop="maintainer" label="维保人" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" text @click="handleExecute(row)">
              执行维保
            </el-button>
            <el-button type="success" size="small" text @click="handleView(row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建维保计划对话框 -->
    <el-dialog v-model="showDialog" title="新建维保计划" width="700px">
      <el-form :model="planForm" label-width="100px">
        <el-form-item label="选择设备">
          <el-select v-model="planForm.equipmentId" placeholder="请选择" style="width: 100%">
            <el-option label="数控车床 EQ-CNC-001" value="1" />
            <el-option label="加工中心 EQ-CNC-002" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="维保类型">
          <el-select v-model="planForm.type" placeholder="请选择" style="width: 100%">
            <el-option label="定期保养" value="regular" />
            <el-option label="预防性维护" value="preventive" />
            <el-option label="状态维修" value="condition" />
          </el-select>
        </el-form-item>
        <el-form-item label="维保周期">
          <el-input-number v-model="planForm.cycle" :min="7" style="width: 200px" />
          <span style="margin-left: 10px">天</span>
        </el-form-item>
        <el-form-item label="首次维保">
          <el-date-picker v-model="planForm.firstDate" type="date" style="width: 100%" />
        </el-form-item>
        <el-form-item label="维保人">
          <el-select v-model="planForm.maintainer" placeholder="请选择" style="width: 100%">
            <el-option label="孙八" value="user1" />
            <el-option label="周九" value="user2" />
          </el-select>
        </el-form-item>
        <el-form-item label="维保内容">
          <el-input v-model="planForm.content" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Plus } from '@element-plus/icons-vue'

const showDialog = ref(false)

const maintenancePlans = ref([
  {
    id: 1,
    code: 'MP-2024-001',
    equipmentName: '数控车床',
    type: '定期保养',
    cycle: '30天',
    nextDate: '2024-11-15',
    maintainer: '孙八',
    status: '待执行'
  },
  {
    id: 2,
    code: 'MP-2024-002',
    equipmentName: '加工中心',
    type: '预防性维护',
    cycle: '90天',
    nextDate: '2024-12-20',
    maintainer: '周九',
    status: '待执行'
  }
])

const planForm = reactive({
  equipmentId: '',
  type: '',
  cycle: 30,
  firstDate: '',
  maintainer: '',
  content: ''
})

const getStatusColor = (status) => {
  const map = {
    '待执行': 'info',
    '执行中': 'warning',
    '已完成': 'success'
  }
  return map[status] || ''
}

const handleCreatePlan = () => {
  showDialog.value = true
}

const handleExecute = (row) => {
  ElMessage.info(`执行维保计划：${row.code}`)
}

const handleView = (row) => {
  ElMessage.info(`查看维保计划：${row.code}`)
}

const handleSubmit = () => {
  showDialog.value = false
  ElMessage.success('维保计划创建成功')
}
</script>

<style scoped>
.maintenance-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
